<template>
    <transition name="alert-fade">
        <div v-show="visible" class="alert" :class="`alert-${type}`">
            <i v-show="closable" class="iconhandle close" @click="close"> X </i>
            <slot></slot>
        </div>
    </transition>
</template>
<script>
export default {
  name: 'Alert',

  props: {
    closable: {
      type: Boolean,
      default: true
    },
    show: {
      type: Boolean,
      default: true,
      twoWay: true
    },
    type: {
      type: String,
      default: 'info'
    }
  },
  data() {
    return {
      visible: this.show
    };
  },
  methods: {
    close() {
      this.visible = false;
      this.$emit('update:show', false);
      this.$emit('close');
    }
  }
}
</script>
<style lang="scss" scoped>
.alert {
  box-sizing: border-box; 
  margin: 0 auto;
  height: 30px;
  width: 90%;
  color: #fff;
  font-size: 16px;
  line-height: 30px;
  padding: 0 10px 0 10px;
  border-radius: 5px;
  text-align: left !important;
  .close {
    float: right !important;
  }
}
.alert-{
  &info {
    background: rgb(79,192,255);
  }
  &success {
    background: rgb(19,206,104);
  }
  &warn {
    background: rgb(247, 186, 42);
  }
  &error {
    background: rgb(255, 72, 72);
  }
}
</style>

